let APIkind= document.querySelectorAll('.APIkind a')
let APIlistText= document.querySelector('.APIlist-text')
let APIlistInput= document.querySelector('.APIlist-input')
let APIlistLi= document.querySelectorAll('.APIlist-list li')

let APIlistBtn= document.querySelectorAll('.APIlist-btn')
let mask= document.querySelector('.mask')

let span= document.querySelectorAll('.modal-title span')

// 第一种方法：
// APIkind.forEach(function(dom,i){
//     dom.addEventListener('mouseover',function(){
//         this.classList.add('active')
//     })

//     dom.addEventListener('mouseout',function(){
//         this.classList.remove('active')
//     })

//     dom.addEventListener('click',function(){
//         APIlistText.textContent=dom.innerHTML
//         APIlistInput.placeholder=this.name
//     })
// })

// 第二种方法：
// 模拟服务器上的传递过来的数据
let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
  ]

//   把后台穿的数据渲染到页面中
let APIkindList= document.querySelector('.APIkind-list')

let APIkinda=''
apiTypeData.forEach(function(dom){
    // if(dom.isnew){
    //     APIkinda+=`
    //         <a href="#" class="active">${dom.name}</a>
    //     `
    // }else{
    //     APIkinda+=`
    //         <a href="#">${dom.name}</a>
    //     `
    // }
    
    APIkinda+=`
        <a href="#" class=" ${dom.isnew ? 'active':''}" data-keyword='${dom.keyword}'} ">${dom.name}</a>
    `
})
APIkindList.innerHTML=APIkinda

// 事件委派来做点击事件
// 在里面不能用this，this不能代表e.target
APIkindList.addEventListener('click',function(e){
    if(e.target.nodeName==='A'){
        APIlistText.textContent=e.target.textContent

        APIlistInput.placeholder=e.target.dataset.keyword
    }
    
})

let APIlistList= document.querySelector('.APIlist-list')

//API列表区域 模拟服务器返回的数据
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
  ]

  let indexLi=''
  listDataArr.forEach(function(dom){
    indexLi+=`
        <li>
            <div class="APIlist-demoal">
                <a href="./API-details.html"><img src="../imgs/${dom.img}" alt=""></a>
                <p><a href="./API-details.html" class="mtb80 fs12">${dom.name}</a></p>
                <p><a href="./API-details.html" class="fs16 APIlist-free ${dom.price==='免费'? 'green':'red'}">${dom.price}</a></p>
                <a class="APIlist-btn" href="#">申请数据</a>
                <p class="APIlist-sicon fs10 cl00 ${dom.isSpecial? 'on':''}">企业专用</p>
            </div>
        </li>
    `
  })
  APIlistList.innerHTML=indexLi


  APIlistList.addEventListener('click',function(e){
    if(e.target.className === 'APIlist-btn'){
        mask.style.display='block'
    }
  })

//   第一种方式：
  mask.addEventListener('click',function(){
      mask.style.display='none'
  })
  
  let modal= document.querySelector('.modal')
  modal.addEventListener('click',function(e){
    e.stopPropagation()
  })

// 第二种方式：
// mask.addEventListener('click',function(e){
//     if(e.target.className=== 'mask'){
//         mask.style.display='none'
//     }
// })

//   登录注册蒙层框

rModal('.modal-title span','.bound','.modal-lup img','.modal-lup input')